popiart-server/web/app/[locale]/billing/page.tsx

import Link from "next/link";
import { BillingAutoRefresh, BillingRefreshListener } from "@/components/billing-refresh-listener";
import { BillingPageState } from "@/components/billing-page-state";
import {
  type BillingCredits,
  type BillingInvoices,
  type BillingSubscription,
  PopiartApiError,
  getBillingCredits,
  getBillingInvoices,
  getBillingSubscription,
  getViewerSession,
} from "@/lib/popiart-api";
import { type Locale } from "@/lib/site-content";

export const dynamic = "force-dynamic";

function formatNumber(locale: Locale, value: number) {
  return new Intl.NumberFormat(locale === "zh" ? "zh-CN" : "en-US").format(value);
}

function formatError(error: unknown) {
  if (error instanceof PopiartApiError) {
    return error.message;
  }
  if (error instanceof Error) {
    return error.message;
  }
  return String(error);
}

export default async function BillingPage({
  params,
  searchParams,
}: {
  params: Promise<{ locale: string }>;
  searchParams: Promise<{ kind?: string; status?: string; page?: string }>;
}) {
  const { locale } = await params;
  const { kind, status, page } = await searchParams;
  const typedLocale = locale as Locale;
  const isZh = typedLocale === "zh";
  const session = await getViewerSession();

  const title = isZh ? "账单中心" : "Billing";
  const subtitle = isZh
    ? "查看当前订阅、积分钱包和订单历史。"
    : "Review your active subscription, point wallets, and order history.";
  const loginCta = isZh ? "去登录" : "Sign in";
  const consoleCta = isZh ? "前往控制台" : "Open console";
  const unboundTitle = isZh ? "先绑定网关用户" : "Bind a gateway user first";
  const unboundBody = isZh
    ? "当前 session 还没有绑定网关用户态，先去控制台绑定后才能读取真实账单与订单。"
    : "This session is not bound to a gateway user yet. Bind it in the console first to read live billing and order data.";
  const subscriptionTitle = isZh ? "当前订阅" : "Current subscription";
  const creditsTitle = isZh ? "积分钱包" : "Point wallets";
  const invoicesTitle = isZh ? "订单历史" : "Order history";
  const noSubscription = isZh ? "当前没有有效订阅。" : "No active subscription.";
  const noCredits = isZh ? "当前没有积分钱包记录。" : "No point wallets.";
  const noOrders = isZh ? "当前没有订单记录。" : "No orders yet.";
  const kindFilter = kind === "subscription" || kind === "points" ? kind : "all";
  const statusFilter = typeof status === "string" && status.trim() ? status.trim() : "all";
  const currentPage = Number.isFinite(Number(page)) && Number(page) > 0 ? Number(page) : 1;
  const pageSize = 8;
  const kindLabel = isZh ? "类型" : "Kind";
  const statusLabel = isZh ? "状态" : "Status";
  const allLabel = isZh ? "全部" : "All";
  const subscriptionsLabel = isZh ? "订阅订单" : "Subscription orders";
  const pointsLabel = isZh ? "积分包订单" : "Point orders";
  const prevLabel = isZh ? "上一页" : "Previous";
  const nextLabel = isZh ? "下一页" : "Next";
  const pageLabel = isZh ? "页码" : "Page";

  if (!session) {
    return (
      <div className="page-stack">
        <section className="section-panel hero-tight">
          <div className="section-heading">
            <h1>{title}</h1>
            <p>{subtitle}</p>
          </div>
        </section>

        <section className="section-panel console-surface-card">
          <div className="section-heading compact">
            <h2>{isZh ? "登录后查看真实账单" : "Sign in to view live billing"}</h2>
          </div>
          <div className="hero-actions">
            <Link className="button button-dark" href={`/${locale}/login`}>
              {loginCta}
            </Link>
          </div>
        </section>
      </div>
    );
  }

  if (!session.gateway_bound) {
    return (
      <div className="page-stack">
        <section className="section-panel hero-tight">
          <div className="section-heading">
            <h1>{title}</h1>
            <p>{subtitle}</p>
          </div>
        </section>

        <section className="section-panel console-surface-card">
          <div className="section-heading compact">
            <h2>{unboundTitle}</h2>
            <p>{unboundBody}</p>
          </div>
          <div className="hero-actions">
            <Link className="button button-dark" href={`/${locale}/console`}>
              {consoleCta}
            </Link>
          </div>
        </section>
      </div>
    );
  }

  let subscription: BillingSubscription | null = null;
  let credits: BillingCredits | null = null;
  let invoices: BillingInvoices | null = null;
  const errors: string[] = [];

  const [subscriptionResult, creditsResult, invoicesResult] = await Promise.allSettled([
    getBillingSubscription(),
    getBillingCredits(),
    getBillingInvoices(),
  ]);

  if (subscriptionResult.status === "fulfilled") {
    subscription = subscriptionResult.value;
  } else {
    errors.push(formatError(subscriptionResult.reason));
  }
  if (creditsResult.status === "fulfilled") {
    credits = creditsResult.value;
  } else {
    errors.push(formatError(creditsResult.reason));
  }
  if (invoicesResult.status === "fulfilled") {
    invoices = invoicesResult.value;
  } else {
    errors.push(formatError(invoicesResult.reason));
  }

  type BillingOrderItem = Record<string, unknown> & { __kind: "subscription" | "points" };

  const allOrders: BillingOrderItem[] = [
    ...((invoices?.subscription_orders?.items || []).map((item) => ({ ...item, __kind: "subscription" as const }))),
    ...((invoices?.point_orders?.items || []).map((item) => ({ ...item, __kind: "points" as const }))),
  ];
  const filteredOrders = allOrders.filter((item) => {
    if (kindFilter !== "all" && item.__kind !== kindFilter) {
      return false;
    }
    if (statusFilter !== "all" && String(item.status || "") !== statusFilter) {
      return false;
    }
    return true;
  });
  const totalPages = Math.max(1, Math.ceil(filteredOrders.length / pageSize));
  const safePage = Math.min(currentPage, totalPages);
  const pagedOrders = filteredOrders.slice((safePage - 1) * pageSize, safePage * pageSize);
  const availableStatuses = Array.from(
    new Set(
      allOrders
        .map((item) => String(item.status || "").trim())
        .filter(Boolean),
    ),
  );
  const hasPendingOrders = allOrders.some((item) => {
    const currentStatus = String(item.status || "").trim();
    return currentStatus !== "" && !["success", "SUCCESS", "TRADE_SUCCESS", "failed", "FAILED", "closed", "CLOSED", "TRADE_CLOSED"].includes(currentStatus);
  });

  function buildBillingHref(nextKind: string, nextStatus: string, nextPage: number) {
    const query = new URLSearchParams();
    if (nextKind !== "all") {
      query.set("kind", nextKind);
    }
    if (nextStatus !== "all") {
      query.set("status", nextStatus);
    }
    if (nextPage > 1) {
      query.set("page", String(nextPage));
    }
    const serialized = query.toString();
    return serialized ? `/${locale}/billing?${serialized}` : `/${locale}/billing`;
  }

  return (
    <div className="page-stack">
      <BillingRefreshListener />
      <BillingAutoRefresh active={hasPendingOrders} />
      <BillingPageState />

      <section className="section-panel hero-tight">
        <div className="section-heading">
          <h1>{title}</h1>
          <p>{subtitle}</p>
        </div>
        {errors.length > 0 ? (
          <div className="status-banner status-banner-error">
            <span>{errors.join(" | ")}</span>
          </div>
        ) : null}
      </section>

      <section className="catalog-grid">
        <article className="console-surface-card">
          <div className="section-heading compact">
            <h2>{subscriptionTitle}</h2>
          </div>
          {subscription && subscription.subscriptions.length > 0 ? (
            <div className="table-list">
              {subscription.subscriptions.map((item, index) => (
                <div className="table-row" key={item.subscription?.id ?? index}>
                  <div>
                    <strong>{item.subscription?.member_level || "subscription"}</strong>
                    <span>{item.subscription?.status || "-"}</span>
                  </div>
                  <div>
                    <strong>{isZh ? "可用积分" : "Available points"}</strong>
                    <span>
                      {formatNumber(
                        typedLocale,
                        subscription.subscription_points[String(item.subscription?.id)]?.available_points || 0,
                      )}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <p className="billing-copy">{noSubscription}</p>
          )}
        </article>

        <article className="console-surface-card">
          <div className="section-heading compact">
            <h2>{creditsTitle}</h2>
          </div>
          {credits && credits.wallets.length > 0 ? (
            <div className="table-list">
              <div className="table-row">
                <div>
                  <strong>{isZh ? "当前余额" : "Balance"}</strong>
                  <span>{formatNumber(typedLocale, credits.balance)}</span>
                </div>
                <div>
                  <strong>{isZh ? "钱包数量" : "Wallet count"}</strong>
                  <span>{formatNumber(typedLocale, credits.wallets.length)}</span>
                </div>
              </div>
              {credits.wallets.map((wallet) => (
                <div className="table-row" key={wallet.id}>
                  <div>
                    <strong>{wallet.source_type}</strong>
                    <span>{isZh ? "可用积分" : "Available points"}: {formatNumber(typedLocale, wallet.points)}</span>
                  </div>
                  <div>
                    <strong>{isZh ? "总积分" : "Total points"}</strong>
                    <span>{formatNumber(typedLocale, wallet.points_total)}</span>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <p className="billing-copy">{noCredits}</p>
          )}
        </article>
      </section>

      <section className="console-surface-card">
        <div className="section-heading compact">
          <h2>{invoicesTitle}</h2>
        </div>
        {allOrders.length > 0 ? (
          <div className="table-list">
            <div className="billing-filter-row">
              <div className="billing-filter-group">
                <strong>{kindLabel}</strong>
                <div className="billing-filter-links">
                  <Link className={`pill ${kindFilter === "all" ? "pill-active" : ""}`} href={buildBillingHref("all", statusFilter, 1)}>
                    {allLabel}
                  </Link>
                  <Link
                    className={`pill ${kindFilter === "subscription" ? "pill-active" : ""}`}
                    href={buildBillingHref("subscription", statusFilter, 1)}
                  >
                    {subscriptionsLabel}
                  </Link>
                  <Link className={`pill ${kindFilter === "points" ? "pill-active" : ""}`} href={buildBillingHref("points", statusFilter, 1)}>
                    {pointsLabel}
                  </Link>
                </div>
              </div>
              <div className="billing-filter-group">
                <strong>{statusLabel}</strong>
                <div className="billing-filter-links">
                  <Link className={`pill ${statusFilter === "all" ? "pill-active" : ""}`} href={buildBillingHref(kindFilter, "all", 1)}>
                    {allLabel}
                  </Link>
                  {availableStatuses.map((itemStatus) => (
                    <Link
                      className={`pill ${statusFilter === itemStatus ? "pill-active" : ""}`}
                      href={buildBillingHref(kindFilter, itemStatus, 1)}
                      key={itemStatus}
                    >
                      {itemStatus}
                    </Link>
                  ))}
                </div>
              </div>
            </div>

            {pagedOrders.map((item, index) => (
              <details className="billing-order-detail" key={`${item.__kind}-${String(item.id ?? index)}`}>
                <summary className="table-row billing-order-summary">
                  <div>
                    <strong>{String(item.plan_title || item.package_name || item.trade_no || "order")}</strong>
                    <span>{String(item.status || "-")}</span>
                  </div>
                  <div>
                    <strong>{String(item.money || "-")} {String(item.currency || "")}</strong>
                    <span>{String(item.payment_method || "-")}</span>
                  </div>
                </summary>
                <div className="billing-order-body">
                  <div className="table-list">
                    <div className="table-row">
                      <div>
                        <strong>{isZh ? "交易号" : "Trade no"}</strong>
                        <span>{String(item.trade_no || "-")}</span>
                      </div>
                      <div>
                        <strong>{isZh ? "退款状态" : "Refund status"}</strong>
                        <span>{String(item.refund_status || "-")}</span>
                      </div>
                    </div>
                    <div className="table-row">
                      <div>
                        <strong>{isZh ? "完成时间" : "Completed at"}</strong>
                        <span>{String(item.complete_time || "-")}</span>
                      </div>
                      <div>
                        <strong>{item.__kind === "subscription" ? (isZh ? "订阅 ID" : "Subscription ID") : (isZh ? "到账积分" : "Delivered points")}</strong>
                        <span>{String(item.__kind === "subscription" ? item.subscription_id : item.points_amount || "-")}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </details>
            ))}
            <div className="billing-pagination">
              <Link
                aria-disabled={safePage <= 1}
                className={`button button-light button-small ${safePage <= 1 ? "button-disabled" : ""}`}
                href={buildBillingHref(kindFilter, statusFilter, Math.max(1, safePage - 1))}
              >
                {prevLabel}
              </Link>
              <span>
                {pageLabel}: {safePage} / {totalPages}
              </span>
              <Link
                aria-disabled={safePage >= totalPages}
                className={`button button-light button-small ${safePage >= totalPages ? "button-disabled" : ""}`}
                href={buildBillingHref(kindFilter, statusFilter, Math.min(totalPages, safePage + 1))}
              >
                {nextLabel}
              </Link>
            </div>
          </div>
        ) : (
          <p className="billing-copy">{noOrders}</p>
        )}
      </section>
    </div>
  );
}